<template>
    <div class="overflow-hidden">
        <n-card
            :bordered="false"
            class="h-full rounded-8px shadow-sm"
            :segmented="{
                content: true
            }"
        >
            <template #header>
                <div class="flex justify-center" style="font-size: 24px">
                    <jb-icon
                        class="mt-2"
                        icon="material-symbols:database-outline"
                    ></jb-icon>
                    <span class="ml-10px"
                        >项目数据库文档
                        <span class="ml-10px" style="color: #f12525; font-size: 18px"
                            >(开发人员专用)</span
                        >
                    </span>
                </div>
            </template>
            <div class="flex justify-center">
                <n-card
                    bordered
                    style="width: 50vw"
                    :segmented="{
                        content: true
                    }"
                >
                    <template #header>
                        <div class="flex" style="font-size: 18px">
                            <jb-icon
                                class="mt-1"
                                icon="material-symbols:database-outline"
                            ></jb-icon>
                            <span class="ml-10px">项目数据源配置</span>
                        </div>
                    </template>
                    <template #header-extra>
                        <div style="font-size: 14px">
                            <span class="ml-10px"
                                >查看更详细的配置请点
                                <span style="color: #f12525">这里> </span></span
                            >
                        </div>
                    </template>
                    <div>
                        <n-card
                            bordered
                            :segmented="{
                                content: true
                            }"
                        >
                            <template #header>
                                <div
                                    class="flex justify-between items-center"
                                    style="font-size: 18px"
                                >
                                    <div class="flex">
                                        <jb-icon
                                            class="mt-1"
                                            icon="material-symbols:database-outline"
                                        ></jb-icon>
                                        <span class="ml-10px"
                                            >项目源:
                                            <span style="color: #2389d1">main</span>
                                        </span>
                                    </div>
                                    <div class="flex">
                                        <span class="ml-10px"
                                            >类型:
                                            <span style="color: #2389d1">[mysql]</span>
                                        </span>
                                    </div>
                                    <div class="flex">
                                        <span class="ml-10px flex">
                                            <jb-icon
                                                class="mt-1"
                                                icon="iconamoon:star-bold"
                                            ></jb-icon>
                                            主项目源:
                                            <jb-icon
                                                class="mt-1"
                                                icon="iconamoon:star-bold"
                                            ></jb-icon>
                                        </span>
                                    </div>
                                    <n-button @click="drawerShow = true">
                                        <template #icon>
                                            <jb-icon icon="tabler:list"></jb-icon>
                                        </template>
                                        查看表结构
                                    </n-button>
                                </div>
                            </template>
                            <template #header-extra>
                                <n-button class="ml-20" quaternary circle>
                                    <template #icon>
                                        <jb-icon icon="ic:outline-fit-screen"></jb-icon>
                                    </template>
                                </n-button>
                            </template>
                            <!--     表格      -->
                            <vxe-table align="center" :data="tableData">
                                <jb-column field="label" title="配置项"></jb-column>
                                <jb-column field="value" title="配置值"></jb-column>
                            </vxe-table>
                        </n-card>
                    </div>
                </n-card>
            </div>
        </n-card>
        <!--    弹窗    -->
        <n-drawer v-model:show="drawerShow" :width="1200" placement="left">
            <n-drawer-content>
                <template #header>
                    <div class="flex justify-center" style="font-size: 24px">
                        <jb-icon icon="material-symbols:database-outline"></jb-icon>
                        <span class="ml-10px"
                            >数据源:[main]数据表文档
                            <span class="ml-10px" style="color: #f12525; font-size: 18px"
                                >(开发人员专用)</span
                            >
                        </span>
                    </div>
                </template>
                <!--   内容    -->
                <div></div>
            </n-drawer-content>
        </n-drawer>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

type DataRow = {
    label: string
    value: string
}
const tableData = ref<DataRow[]>([
    { label: 'db_name', value: 'db_name' },
    { label: 'db_name', value: 'db_name' },
    { label: 'db_name', value: 'db_name' }
])
const drawerShow = ref(false)
</script>

<style scoped></style>
